<template>
	<!-- 20230510 -->
	<view class="mall-logistics-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-20">
			
			<!-- 背景色 -->
			<view class="back-block jc-header bg-main"></view>

			<!-- 订单信息 -->
			<view class="margin-lr-30 margin-top-20 radius-10 bg-ff">
				<view class="padding-20 flex align-center" v-if="orderProductInfo.id">
					<!-- 产品图片 -->
					<image class="jc-image-140 radius-10" :src="orderProductInfo.product_cover_img" mode="aspectFill">	
					</image>
					<!-- 订单信息 -->
					<view class="margin-left-20 flex-one">
						<view class="flex align-center">
							<!-- 商品标题 -->
							<view class="flex-one line-height-40 text-cut-one text-28 text-bold text-33">
								{{orderProductInfo.product_name}}
							</view>
							<!-- 物流状态 -->
							<view class="width-120 margin-left-20 text-right text-30 text-cut-one">{{logistics.logistics_text}}</view>
						</view>
						
						<view class="margin-top-65 flex align-center justify-between">
							<!-- 价钱 -->
							<view class="text-28 text-77">
								¥{{orderProductInfo.product_price}}
							</view>
						
							<view class="text-26 text-aa">共{{order.total_number}}件商品</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 物流信息 -->
			<view
				class="margin-lr-30 margin-top-20 line-height-100 radius-10 padding-lr-20 flex align-center justify-between bg-ff">
				<text class="text-28 text-bold">{{order.express_name}}</text>
				<view class="flex align-center">
					<text class="tyIcon-list-1 text-28 text-4d"></text>
					<text class="margin-left-5 text-26 text-4d">{{order.express_number}}</text>
				</view>
			</view>

			<!-- 物流轨迹 -->
			<view class="margin-top-20 margin-lr-30">
				<ty-list-logistics :list="logistics.logistics" :status="logistics.logistics_status"
					:address="{province:order.province,city:order.city,area:order.area,address:order.address}"></ty-list-logistics>
			</view>
			
		</view>
		
		<!-- 页面浮层 -->
		<view class="page-layer">
		
		</view>
	</view>
</template>

<script>
	import mall from "./api/mall.js"
	export default {
		data() {
			return {
				// 订单ID
				orderId: '',
				// 订单信息
				order: {
					mallOrderProduct: [{}]
				},
				// 订单信息
				orderProductInfo: {},
				// 物流信息
				logistics: {}
			}
		},

		onLoad(options) {
			this.orderId = options.id || ''
		},

		onReady() {
			mall.order.getLogistics(this.orderId).then(res => {
				if (res.code == 0) {
					this.order = res.data.order
					this.orderProductInfo = res.data.order.mallOrderProduct[0]
					this.logistics = res.data.logistics
				}
			})
		},
		
		methods: {

		}
	}
</script>

<style scoped>
	.back-block {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100vw;
		height: 270rpx;
	}
</style>
